<template>
  <div class="symptom">
    <Head></Head>
    <div class="symptom-container">
      <SymptomBtns></SymptomBtns>
      <div class="sym-countdown">{{ countdown }}s</div>
      <div class="front">
        <div class="radios">
          <el-radio-group v-model="selectRadio" class="sym-rgroup">
            <el-radio :label="1" class="symradio">男性</el-radio>
            <el-radio :label="2" class="symradio">女性</el-radio>
          </el-radio-group>
        </div>
        <div class="frontImage">
          <img
            :src="malefrontImg"
            usemap="#bodyMap"
            alt=""
            style="cursor: crosshair"
            v-show="selectRadio === 1"
          />
          <img
            :src="femalefrontImg"
            alt=""
            v-show="selectRadio === 2"
            usemap="#femalefrontMap"
          />
          <map name="bodyMap">
            <area
              v-for="(area, index) in bodyParts"
              :key="index"
              shape="rect"
              :coords="area.coords"
              :alt="area.name"
              @click="handleAreaClick(area.cnName, selectRadio)"
            />
          </map>
          <map name="femalefrontMap">
            <area
              v-for="(area, index) in femaleFrontParts"
              :key="index"
              shape="rect"
              :coords="area.coords"
              :alt="area.name"
              @click="handleAreaClick(area.cnName, selectRadio)"
            />
          </map>
        </div>
        <div class="symicons">
          <img :src="symiconImg" alt="" />
        </div>
      </div>
      <div class="backend">
        <img
          :src="malebackImg"
          ref="maleBackRef"
          v-show="selectRadio === 1"
          usemap="#maleBackMap"
          @mousedown="startDrawing"
        />
        <map name="maleBackMap">
          <area
            v-for="(area, index) in malebackParts"
            :key="index"
            shape="rect"
            :coords="area.coords"
            :alt="area.name"
            @click="handleAreaClick(area.cnName, selectRadio)"
          />
        </map>
        <img
          :src="femalebackImg"
          alt=""
          v-show="selectRadio === 2"
          usemap="#femalebackMap"
          @mousedown="startDrawing"
          ref="femalebackRef"
        />
        <map name="femalebackMap">
          <area
            v-for="(area, index) in femaleBackParts"
            :key="index"
            shape="rect"
            :coords="area.coords"
            :alt="area.name"
            @click="handleAreaClick(area.cnName, selectRadio)"
          />
        </map>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import malefrontImg from "@/assets/images/malefront.png";
import malebackImg from "@/assets/images/maleback.png";
import symiconImg from "@/assets/images/symicon.png";
import femalefrontImg from "@/assets/images/femalefront.png";
import femalebackImg from "@/assets/images/femaleback.png";
import {
  bodyParts,
  malebackParts,
  femaleBackParts,
  femaleFrontParts,
} from "@/utils/bodyPart";
const areas = ref<
  Array<{ shape: string; coords: string; href: string; alt: string }>
>([]);
const router = useRouter();
const countdown = ref(500);
const maleBackRef = ref<HTMLImageElement | null>(null);
let timer: any;
const selectRadio = ref(1);
let isDrawing = false;
let startX = 0;
let startY = 0;
const femalebackRef = ref<HTMLImageElement | null>(null);
// 定义身体部位及其坐标范围

const handleAreaClick = (part: string, sex: number) => {
  router.push({ path: "/symCategory", query: { sex: sex, part: part } });
  console.log("是部位", part);
};
const startDrawing = (e: MouseEvent) => {
  console.log("startDrawing");
  isDrawing = true;
  const rect = femalebackRef.value?.getBoundingClientRect();
  if (rect) {
    startX = e.clientX - rect.left;
    startY = e.clientY - rect.top;
    console.log(startX, startY, "down");
  }
};

onMounted(() => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      router.push("/home");
    }
  }, 1000);
});
</script>
<style lang="scss" scoped>
@import "@/styles/mixins.scss";

.symptom {
  @include container;
  .symptom-container {
    position: relative;

    .sym-countdown {
      position: absolute;
      top: 6vh;
      right: 40px;
      font-size: 40px;
      color: #d82f2f;
    }
    .front {
      padding: 30px 40px 30px 30px;
      position: relative;

      height: 45vh;
      width: 100%;
      display: flex;

      .radios {
        .sym-rgroup {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          :deep(.el-radio.symradio) {
            margin-bottom: 30px;
            .el-radio__inner {
              width: 48px;
              height: 48px;
              //border-color: #000000;
              border: 3px solid #000000;
              background-color: transparent; /* 未选中时的背景颜色 */
              position: relative;
            }
            .el-radio__label {
              font-size: 40px;
              color: #000000;
            }
            /* 选中状态下的样式 */
            &.is-checked {
              .el-radio__inner {
                background-color: #0960ec; /* 选中时的背景颜色 */
                border-color: #0960ec; /* 选中时的边框颜色 */
              }

              /* 隐藏默认的选中图标 */
              .el-radio__inner::after {
                display: none;
              }
              /* 添加对钩图标 */
              .el-radio__inner::before {
                content: "✓"; /* 对钩字符 */
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #fff; /* 对钩颜色 */
                font-size: 28px; /* 对钩大小 */
                font-weight: bold;
              }
            }
          }
        }
      }
      .frontImage {
        padding-left: 20px;
      }
      .symicons {
        position: absolute;
        right: 45px;
      }
    }
    .backend {
      padding-left: 22vw;
    }
  }
}
</style>
